import React, {useRef, useState, useEffect} from 'react'
import Table from '@/components/table/Table'
import {Tag, Modal, Button, Select, Row, Col, Input, message} from 'antd';
// import { createStore } from "redux"
import Form from './form'
import RoomForm from '@components/Form/Form'
import Detail from './detail'
import Search from '@/components/serch/index'
import Add from '../neibin/add'
// import reducer from "./../../store/reducer"
// const store = createStore(reducer)
interface IProps {

}
interface IState {
  list: any[],
  visible: boolean,
  titleName: string,
  form: any
}
interface validateForm {
  userName?: string,
  passWord?: number
}
const form = {}
const Sanke = (props:any, ref: any)=>{
  const {Option} = Select
  const { confirm } = Modal;
  let child: any = useRef() // 表单组件返回的form
  const [isAdd, setisAdd] = useState<boolean>(false) // 新增编辑开关
  const [list, setlist] = useState<any>([]) // 列表数据
  const [visible, setvisible] = useState(false) //弹窗开关
  const [roomOperation, setroomOperation] = useState(false);
  const [titleName, settitleName] = useState('新增') // 标题名
  const [isDetail, setIsDetail] = useState<boolean>(false)  // 是否展示详情
  const [width, setWidth] = useState<number>(500)  // 初始化表单
  const [editConfig, seteditConfig] = useState<Object>({roomTitle: '', roomNum: ''}); // 展示表单类型
  const [id, setid] = useState<any>(0);
  const [detailInfo, setdetailInfo] = useState<any>({});
  const formVal = [ // 表单配置表
    {
      label: '选择房间',
      name: 'userName',
      rules: [{ required: true, message: '请输入用户名' }],
      render: <Select>
                <Option value='睿沃智慧酒店401'>睿沃智慧酒店401</Option>
                <Option value='睿沃智慧酒店402'>睿沃智慧酒店402</Option>
                <Option value='睿沃智慧酒店403'>睿沃智慧酒店403</Option>
              </Select>  
      
    }
  ] 
  const columns = [
    {
      title: '房号',
      dataIndex: 'roomNum',
      key: 'roomNum',
      width: '150px',      
      align: 'center',
    },    
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      align: 'center',
      width: '120px',
      fixed: 'left',
      render: (text: any) => <span>{text}</span>,
    },
    {
      title: '住宿状态',
      dataIndex: 'roomStatus',
      key: 'roomStatus',
      width: '110px',      
      align: 'center',
    },    
    {
      title: '入住时间',
      dataIndex: 'startTime',
      key: 'startTime',
      align: 'center',
      width: '200px'
    },    
    {
      title: '离店时间',
      dataIndex: 'endTime',
      key: 'endTime',
      align: 'center',
      width: '200px'      
    },      
    {
      title: '证件号码',
      dataIndex: 'idCardNo',
      key: 'idCardNo',
      align: 'center',
      fixed: 'left',
      width: '240px',
    },
    {
      title: '性别',
      dataIndex: 'gender',
      key: 'gender',
      align: 'center',
      width: '70px',
      render: (text: any) => <span>{text}</span>,
    },
    {
      title: '民族',
      dataIndex: 'nation',
      key: 'nation',
      width: '70px',      
      align: 'center',
    },
    {
      title: '出生日期',
      dataIndex: 'birthday',
      key: 'birthday',
      width: '120px',      
      align: 'center',
    },
    {
      title: '户籍地市县区',
      dataIndex: 'address',
      key: 'address',
      align: 'left',
      width: '300px'
    },       
    {
      title: '认证结果',
      dataIndex: 'user_face',
      key: 'user_face',
      align: 'center',
      width: '100px',
      render: (record: any) => (
      <Tag color={'#87d068'}>认证成功</Tag>
      )
    },        
    {
      title: '操作',
      key: 'action',
      fixed: 'right',
      width: '320px',
      align: 'center',
      render: (record: any) => (
        <div>
          <Button size='small' type='link' onClick={()=>detail(record)}>查看</Button>
          <Button size='small' type='link' onClick={()=>edit(record, 'visitor')}>访客登记</Button>
          <Button size='small' type='link' onClick={()=>edit(record, 'togertor')}>同住登记</Button>
          <Button size='small' type='link' onClick={()=>checkOut(record)}>退房</Button>
          <Button size='small' type='link' onClick={()=>checkIn(record)}>换房</Button>
        </div>
      ),
    },
  ]
  const searchList = [
    {
      render:()=>{
        return <Row>
          <Col span={4} className='ml10'>
            <Input placeholder={'酒店名称'}></Input>
          </Col>
          <Col span={3} className='ml10'>
            <Input placeholder={'房型查询'}></Input>
          </Col>
          <Col span={5} className='ml10'>
            <Input placeholder={'姓名 / 证件号码 / 性别 / 民族查询'}></Input>
          </Col>      
          <Col span={4} className='ml10'>
            <Input placeholder={'入住状态'}></Input>
          </Col>            
          <Col span={4} className='ml10'>
            <Button className='mb20' type='primary'>搜索</Button>
          </Col>                                
        </Row>
      }
    },
  ]  
  const edit = (record: any, name: string = 'edit')=>{
    // 办理入住
    settitleName('编辑')
    if(name === 'edit') {
      seteditConfig({
        roomTitle: '',
        roomNum: '',
        type: 'edit'        
      })  
      settitleName('编辑')
    } else if (name === 'visitor') {
      seteditConfig({
        roomTitle: '访问房间',
        roomNum: record.roomNum,
        type: 'visitor'
      })
      settitleName('访问登记')
    } else if (name === 'togertor') {
      seteditConfig({
        roomTitle: '同住房间',
        roomNum: record.roomNum,
        type: 'edit'
      })
      settitleName('同住登记')

    }
    setIsDetail(false)
    setWidth(1000)
    setroomOperation(false)
    setvisible(true)
  }
  const checkIn = (record: any)=>{
    // 换房
    setid(record.id)
    settitleName('换房')
    setWidth(600)
    setIsDetail(false)
    setroomOperation(true)  
    setvisible(true)      
  }
  const checkOut = (record: any)=>{
    // 退房
    confirm({
      title: '退房',
      content: `租住在 ${record.roomNum} 的旅客 ${record.name} 将操作退房，是否确认退房？`,
      onOk() {
        list.forEach((val: any, i: string)=>{
          if(val.id === record.id) {
            let myDate = new Date();
            var mytime=myDate.toLocaleString(); 
            val.endTime = mytime
            val.roomStatus = '已退房'
          }
        })
        setlist([...list])
        localStorage.setItem('sankeList', JSON.stringify([...list]))
        message.success('退房成功')
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }
  const detail =  (record: any)=>{
    // 核验详情
    settitleName('查看信息')
    setdetailInfo(record)
    setIsDetail(true)
    setWidth(1000)
    setvisible(true)
  }
  const handleOk = (e: any)=>{
    // 表单submit
    child.current.validateFields().then((res:any)=>{ //  表单验证通过
      list.forEach((val: any, i:any)=>{
        if(val.id === id) {
          val.roomNum = child.current.getFieldsValue().userName
        }
      })
      setvisible(false)
      setlist([...list])
      if(roomOperation) {
        message.success('换房成功')
      }
    }).catch(((res: any)=>{ // 表单验证不通过
      
    }))
    
  }
  const handleCancel = ()=>{
    //取消
    setvisible(false)
  }  
  const goAdd = (val: any) =>{
    // 开启表单
    setisAdd(val)
  }
  useEffect(() => {
    let string:any= localStorage.getItem('sankeList')
    if(string) {
      let arr:any = JSON.parse(string)
      setlist([...arr])
    }    
    // let array: any[] = [   
    //   {
    //     address: '人工智能小镇',
    //     birthday: '1993.7.25',
    //     gender: '男',
    //     idCardNo: '3303027xxxxxxxx',
    //     imgNow: '',
    //     name: 'cgz',
    //     roomNum: '睿沃智慧酒店401',
    //     roomStatus: '入住中/3天',
    //     nation: '汉族',
    //     user_face: 1,
    //     photo: '',
    //     user_cardType: '身份证',
    //     startTime: '2020-11-13',
    //     endTime: '2020-11-14'
    //   }    
    // ]
    // setlist([...array])
  }, [])
  
  return (
    <div>
      {
        isAdd ? <Add></Add> :
        <>
          <Search add={goAdd} selectSpan={24} searchList={searchList}/>
          <Table columns={columns} list={list}/>
            <Modal
            getContainer={false}
            title={titleName}
            visible={visible}
            onOk={handleOk}
            onCancel={handleCancel}
            width={width}
            footer={
              isDetail ? [] : [
                // 定义右下角 按钮的地方 可根据需要使用 一个或者 2个按钮
                <Button key="back" onClick={handleCancel}>取消</Button>,
                <Button key="submit" type="primary" onClick={handleOk}>
                    确定  
                </Button>]
            }
          >
            {
              !isDetail ? roomOperation ? <RoomForm ref={child} formVal={formVal} sentForm={form}/> : <Form ref={child} editConfig={editConfig}/> : <Detail detailInfo={detailInfo}></Detail>
            }
          </Modal>
        </>   
      }                 
    </div>
)  
}

export default Sanke